<template>
  <!-- 面包屑导航 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="编号" width="50" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="idCard" label="身份证号" />
      <el-table-column prop="lastLoginTime" label="最后登录时间" />
      <el-table-column label="角色">
        <template #default="scope">
          <el-tag v-if="scope.row.role === 0" type="primary">超级管理员</el-tag>
          <el-tag v-if="scope.row.role === 1" type="success">普通用户</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-model:current-page="queryInfo.currentPageNo"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[1, 5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryInfo.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup>

import { ref, reactive} from "vue";

import { ArrowRight } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus';

import { getUserInfo } from "../../api/user.js";

// 数据
const tableData = ref([]);

// 定义查询的参数
const queryInfo = reactive({
  currentPageNo: 1,
  pageSize: 5,
  totalCount: 0
});

const handleSizeChange = (val) => {
  console.log(val);
  queryInfo.pageSize = val;
  loadUserInfo();
};

const handleCurrentChange = (val) => {
  console.log(val);
  queryInfo.currentPageNo = val;
  loadUserInfo();
};

const loadUserInfo = async () => {
  const { data: res } = await getUserInfo(queryInfo);
  console.log(res);
  if (res["code"] === 1001) {
    ElMessage({
      type: 'success',
      message: '获取用户信息成功',
    });
    tableData.value = res["data"]["data"];
    // 修改总数据量
    queryInfo.totalCount = res["data"]["totalCount"]
  }
};

loadUserInfo();

</script>

<style scoped>
</style>